<template>
  <div>
    <el-table
      :data="detailTabData"
      size="mini"
      stripe
      border
      style="width:70%;margin:auto;">
      <el-table-column
        prop="time"
        label="加班时间"
        width="200"
        align="center">
      </el-table-column>
      <el-table-column
        prop="application_place"
        label="加班地点"
        width="200"
        align="center">
      </el-table-column>

      <el-table-column
        prop="expense_cause"
        label="加班事由"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="ename"
        label="加班人员"
        width="200"
        align="center"
      >
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        downloadLoading: false,
        detailTabData: [],
      };
    },
    methods: {
      loadDetailTabData() {
        this.loading = true;
        this.postRequest("/expense/detailtab", {
          depno: this.depno,
          start_time: this.starttime,
          end_time: this.endtime,
          project_number: this.projectNumber,
          positionid:this.positionid,
        }).then(resp => {
          var _this = this;
          this.loading = false;
          if (resp && resp.status == 200) {
            var result = resp.data;
            _this.detailTabData = result.detailData;
          }
        });
      },
      loadDetailTabDataByExpenseId(value) {
        this.postRequest("/expense/detailtabByExpenseIds", {
          expense_ids: value
        }).then(resp => {
          var _this = this;
          if (resp && resp.status == 200) {
            var result = resp.data;
            _this.detailTabData = result.detailData;
          }
        });
      },
      handleDownloaddetailTab() {
        this.downloadLoading = true;
        require.ensure([], () => {
          const {export_json_to_excel} = require("@/vendor/Export2Excel");
          const tHeader = ["加班时间", "加班地点", "加班事由", "加班人员"];
          const filterVal = [
            "time",
            "application_place",
            "expense_cause",
            "ename"
          ];
          const list = this.detailTabData;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, "加班人员明细表excel");
          this.downloadLoading = false;
        });
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },
    },
    props: {
      depno: {
        type: Number,
        default: 0
      },
      starttime: {
        type: String,
        default: ''
      },
      endtime: {
        type: String,
        default: ''
      },
      projectNumber: {
        type: String,
        default: ''
      },
      expense_ids: {
        type: Array,
        default: []
      },
      positionid: {
        type: Array,
        default: []
      }

    },
    watch: {
      projectNumber: function (value, oldValue) {
        this.loadDetailTabData();
      },
      depno: function (value, oldValue) {
        this.loadDetailTabData();
      },
      starttime: function (value, oldValue) {
        this.loadDetailTabData();
      },
      endtime: function (value, oldValue) {
        this.loadDetailTabData();
      },
      expense_ids: function (value, oldValue) {
        if (value.length > 0) {
          this.loadDetailTabDataByExpenseId(value)
        } else {
          this.loadDetailTabData()
        }
      },
      positionid: function (value, oldValue) {
        this.loadDetailTabData();
      }
    }
  }
</script>
